<template>
	<view class="content">
		<view class="login-bg">
			<image :src="$IMG_URL+'bg.png'" mode="aspectFill" style="width: 100vw;height: 100vh;"></image>
		</view>
		<image :src="$IMG_URL+'logo.png'" style="width: 185rpx;height: 185rpx;"></image>
		<view class="login-con" v-if="loginType === 1">
			<image :src="$IMG_URL+'formBG_password.png'" style="width: 688rpx;height: 646rpx;"></image>
			<view class="login-pass">
				<view class="login-top">
					<view class="pass-line" style="margin-left: 110rpx;">
						<view style="font-weight: 500;color: #000000;margin-top: 27rpx;">密码登录</view>
						<view class="login-line"></view>
					</view>
					<view class="pass-right" @click="loginType = 2">验证码登录</view>
				</view>
				<view class="login-phone">
					<view style="width: 100%;margin-top: 60rpx;">
						<u-input placeholder="请输入手机号" fontSize="31rpx" placeholderStyle="color: #999999" border="bottom"
							v-model="username"></u-input>
					</view>
					<view style="width: 100%;margin-top: 40rpx;">
						<u-input password placeholder="请输入密码" fontSize="31rpx" placeholderStyle="color: #999999"
							border="bottom" v-model="password">
							<template slot="suffix">
								<text style="color: #000000;font-size: 31rpx;"
									@click="goPath('/pages/password/password')">
									忘记密码
								</text>
							</template>

						</u-input>
					</view>
					<view class="login-but">
						<u-button type="primary" shape="circle" text="登录" @click="passwordSubmit"></u-button>
					</view>
					<view class="login-register" @click="goPath('/pages/register/register')">注册</view>
				</view>
			</view>
		</view>
		<view class="login-con" v-if="loginType === 2">
			<image :src="$IMG_URL+'formBG_verificationCode.png'" style="width: 688rpx;height: 646rpx;"></image>
			<view class="login-pass">
				<view class="login-top">
					<view class="pass-left" @click="loginType = 1">密码登录</view>
					<view class="pass-line" style="margin-left: auto;margin-right: 110rpx;">
						<view style="font-weight: 500;color: #000000;margin-top: 27rpx;">验证码登录</view>
						<view class="login-line"></view>
					</view>
				</view>
				<view class="login-phone">
					<view style="width: 100%;margin-top: 60rpx;">
						<u-input placeholder="请输入手机号" fontSize="31rpx" placeholderStyle="color: #999999" border="bottom"
							v-model="tel"></u-input>
					</view>
					<view style="width: 100%;margin-top: 40rpx;">
						<u-input placeholder="请输入验证码" fontSize="31rpx" placeholderStyle="color: #999999" border="bottom"
							v-model="smsCode">
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
								<text @tap="getCode" style="color: #0277DE;font-size: 31rpx;">
									{{tips}}
								</text>
							</template>

						</u-input>
					</view>
					<view class="login-but">
						<u-button type="primary" shape="circle" text="登录" @click="submitForm"></u-button>
					</view>
					<view class="login-register" @click="goPath('/pages/register/register')">注册</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loginApi,
		codeApi,
		smsApi
	} from '@/api/user'
	export default {
		data() {
			return {
				username: '',
				password: '',
				tel: '',
				smsCode: "",
				tips: '',
				loginType: 1,
			}
		},
		methods: {
			async passwordSubmit() {
				if (!this.username) {
					uni.$u.toast('请输入手机号')
					return
				}
				if (!this.password) {
					uni.$u.toast('请输入密码')
					return
				}
				uni.showLoading({
					title: '登录中...',
					mask: true
				})
				const res = await loginApi({
					username: this.username,
					password: this.password,
				})
				uni.hideLoading()
				uni.setStorageSync('token', res.msg)
				uni.switchTab({
					url: '/pages/index/index'
				})

			},
			goPath(url) {
				uni.navigateTo({
					url
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (!this.tel) {
					uni.$u.toast('请输入手机号')
					return
				}
				if (!uni.$u.test.mobile(this.tel)) {
					uni.$u.toast('请输入正确的手机号')
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					const res = await smsApi({
						mobile: this.tel
					})
					uni.hideLoading();
					uni.$u.toast('验证码已发送');
					this.$refs.uCode.start();
				} else {
					uni.$u.toast(this.tips);
				}
			},
			async submitForm() {
				if (!this.tel) {
					uni.$u.toast('请输入手机号')
					return
				}
				if (!uni.$u.test.mobile(this.tel)) {
					uni.$u.toast('请输入正确的手机号')
					return
				}
				if (!this.smsCode) {
					uni.$u.toast('请输入验证码')
					return
				}

				uni.showLoading({
					title: '登录中...',
					mask: true
				})
				const res = await codeApi({
					tel: this.tel,
					smsCode: this.smsCode,
				})
				uni.hideLoading()
				uni.setStorageSync('token', res.msg)
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 200rpx;
	}

	.login-bg {
		position: fixed;
		left: 0;
		top: 0;
		z-index: -1;
	}

	.login-con {
		position: relative;
		margin-top: 77rpx;
	}

	.login-pass {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		font-size: 31rpx;
		color: #999999;
	}

	.login-top {
		width: 100%;
		height: 94rpx;
		display: flex;
	}

	.pass-line {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login-line {
		width: 31rpx;
		height: 4rpx;
		background: #0277DE;
		border-radius: 2rpx;
		margin-top: 8rpx;
	}

	.pass-right {
		height: 94rpx;
		width: 300rpx;
		margin-left: auto;
		display: flex;
		padding-top: 27rpx;
		justify-content: center;
	}

	.pass-left {
		height: 94rpx;
		width: 300rpx;
		display: flex;
		padding-top: 27rpx;
		justify-content: center;
	}

	.login-phone {
		width: 100%;
		padding: 0 46rpx;
	}

	.login-but {
		width: 100%;
		margin-top: 90rpx;

		& ::v-deep .u-button {
			height: 77rpx !important;
			font-size: 31rpx !important;
			font-weight: 500 !important;
		}

		& ::v-deep .u-button__text {

			font-size: 31rpx !important;
			font-weight: 500 !important;
		}

	}

	.login-register {
		width: 100%;
		margin-top: 46rpx;
		text-align: center;
		font-weight: 500;
		font-size: 31rpx;
		color: #999999;
	}
</style>